import 'dart:math';

import 'package:flutter/material.dart';
import 'package:kasax_demos2/entry/data_posts_test.dart';

import 'info_wrapper.dart';

/// 详情页
class PinterestDetailsPage extends StatefulWidget {
  PinterestInfo info;

  PinterestDetailsPage(this.info, {Key? key}) : super(key: key);

  @override
  _PinterestDetailsPageState createState() => _PinterestDetailsPageState();
}

class _PinterestDetailsPageState extends State<PinterestDetailsPage> {
  @override
  Widget build(BuildContext context) {
    var imgUrl = PostsDatas
        .TEST_POSTS[Random().nextInt(PostsDatas.TEST_POSTS.length)].imageUrl;
    return Scaffold(
      backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            elevation: 0,
            backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
            stretch: true,
            expandedHeight: 250,
            // pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              stretchModes: [
                StretchMode.zoomBackground,
                StretchMode.blurBackground,
                StretchMode.fadeTitle
              ],
              centerTitle: true,
              background: buildContainerBg(imgUrl),
              title: Text(
                widget.info.title,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
          SliverList(
              delegate: SliverChildBuilderDelegate((contex, index) {
            return Container(
              child: SingleChildScrollView(
                child: Container(
                  padding: EdgeInsets.all(16),
                  child: Column(
                    children: [
                      Text(
                        widget.info.descrption,
                        style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.w300,
                            wordSpacing: 8,
                            letterSpacing: 3,
                            color: Colors.white70),
                      ),
                      SizedBox(
                        height: 125,
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 35, right: 35),
                        child: SizedBox(
                          width: double.infinity,
                          child: RaisedButton(
                            color: Colors.lightBlue,
                            highlightColor: Colors.yellow,
                            splashColor: Colors.pink,
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(16)),
                            onPressed: () {},
                            child: Text(
                              "TAKE THIS LEASSON",
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            );
          }, childCount: 1))
        ],
      ),
    );
  }

  /// 添加渐变效果
  Container buildContainerBg(String imgUrl) {
    return Container(
      child: Stack(
        fit: StackFit.expand,
        children: [
          Image(
            fit: BoxFit.cover,
            image: NetworkImage(
              imgUrl,
            ),
          ),
          const DecoratedBox(
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment(0.0, 0.5),
                      end: Alignment(0.0, 0.0),
                      colors: [Color(0x60000000), Color(0x00000000)])))
        ],
      ),
    );
  }
}
